<template>
 
      <el-form :label-position="labelPosition" label-width="100px">
        <el-form-item label="规格设置">
            <div>
              <template v-for="(item,i) in skulist" >
                <div :key="i">
                  <el-input size="medium" class="input-new-tag" v-model="item.name" ref="saveTagInput" placeholder="如颜色、尺码、大小"
                    @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                  </el-input>
                </div>
                <div class="sku_item">
                  <div class="tagbox"></div>
                  <div class="sku_item_div" v-for="(sku,a) in item.list" :key="a">
                    <el-input size="medium" class="input-new-tag" v-model="item.list[a]" ref="saveTagInput" placeholder="请填写子规格，如L、M"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                    </el-input>
                    <i class="el-icon-error" />
                  </div>
                  <el-button type="text" @click='addskuvale(i)'>添加规格值</el-button>
                </div>
              </template>
              <el-button v-if="skulist.length<3" type="text" @click='addskuitem()'>添加规格项</el-button>

              <el-table :data="tabledata" :span-method="arraySpanMethod">
                <template v-for="(item,i) in keylist">
                  <el-table-column :prop="'key'+i" :label="item">
                  </el-table-column>
                </template>
              </el-table>
            </div>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" @click="addSave" v-if="Producttype=='add'">添加</el-button>
          <el-button size="medium" @click="editSave" v-else>编辑</el-button>
        </el-form-item>
      </el-form>

    </el-tab-pane>

  </el-tabs>


</template>
<script>
  import {
    doCombination
  } from "@/utils/index"
  export default {
    name: 'Editproduct',
    data() {
      return {
        labelPosition: 'left',
        skutype: 1,
        inputValue: '',
        skulist: [{
          name: '',
          list: ['']
        }],
        keylist: [],
        tabledata: []
      }
    },
    props: {
      Producttype: {
        type: String,
        default: 'add'
      },
      Pid: {
        type: String,
        default: "",
      }
    },
    methods: {
      getlist() {
      },
      addSave() {
        this.close()
      },
      editSave() {
        this.close()
      },
      close() {
        this.$emit('on-close')
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        var skulist = this.skulist;
        let b = skulist.length
        var list = []
        var keylist = []
        skulist.forEach(a => {
          list.push(a.list);
          keylist.push(a.name)
        })
        this.keylist = keylist
        //规格排列组合
        var alist = doCombination(list)
        // 整合table

        let tabledata = []
        alist.forEach(l => {
          let data = {}
          for (let i = 0; i < b; i++) {
            let d = 'key' + i
            data[d] = l[i] ? l[i] : '#' ;
          }
          tabledata.push(data)
        })
        this.tabledata = tabledata
      },
      addskuvale(i) {
        this.skulist[i].list.push('')
        this.handleInputConfirm()
      },
      addskuitem() {
        this.skulist.push({
          name: '',
          list: ['']
        })
         this.handleInputConfirm()
      },
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0) {

          let d = this.skulist[1] ?  this.skulist[1].list.length :1
          if (this.skulist[2]&&this.skulist[2].list) {
            d = d * this.skulist[2].list.length
          }

          if (rowIndex % d === 0) {
            return {
              rowspan: d,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        } else if (columnIndex === 1) {
            let d = this.skulist[2] ?  this.skulist[2].list.length :1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
        }
      },
    },
    mounted() {

    },

    beforeUpdate() {
      this.getlist()
    }
  }
</script>

<style>

</style>
<style scoped>
  .el-input {
    width: 270px;
  }
  .box {
    width: 100%;
    padding: 60px;
    height: calc(100vh - 77px);
    overflow: scroll;
  }

  .upload_img {
    width: 148px;
    height: 148px;

  }

  .tagbox {
    width: 20px;
    height: 20px;
    border: 1px solid #b8b9bd;
    border-top: none;
    border-right: none;
    margin: 0 10px;
  }

  .sku_item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;

  }

  .sku_item_div {
    position: relative;
    width: 160px;
    margin-right: 15px;
    margin-bottom: 20px;
  }

  .el-icon-error {
    font-size: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    color: #b8b9bd;
    cursor: pointer;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 160px;
    vertical-align: bottom;
    font-size: 12px;

  }
</style>
